<script setup lang="ts">
import type {lib} from 'crypto-js';
import {MD5, RIPEMD160, SHA1, SHA224, SHA256, SHA3, SHA384, SHA512, enc} from 'crypto-js';

import InputCopyable from '../../components/InputCopyable.vue';
import {convertHexToBin} from './hash-text.service';
import {useQueryParam} from '@/composable/queryParams';

const algos = {
  MD5,
  "MD5-16": MD5,
  SHA1,
  SHA3,
  SHA224,
  SHA256,
  SHA384,
  SHA512,
  RIPEMD160,
} as const;

type AlgoNames = keyof typeof algos;
// type Encoding = keyof typeof enc | 'Bin';
const algoNames = Object.keys(algos) as AlgoNames[];
// const encoding = useQueryParam<Encoding>({defaultValue: 'Hex', name: 'encoding'});
const clearText = ref('');
const active = ref(false);

function formatWithEncoding(algo: string, words: lib.WordArray) {
  let val = words.toString()
  val = algo === 'MD5-16' ? val.substring(8, 24) : val;
  return active.value ? val.toUpperCase() : val.toLowerCase();
}

const hashText = (algo: AlgoNames, value: string) => formatWithEncoding(algo, algos[algo](value));

</script>

<template>
  <div>
    <c-card>
      <c-input-text v-model:value="clearText" multiline raw-text placeholder="输入要转换的字符串" rows="3" autosize autofocus label="Hash转换:"/>
      <n-divider/>
      <div mb-2 flex items-center>
        <span w-100px>是否大写： </span>
        <n-space flex-1>
          <n-switch v-model:value="active">
            <template #checked>
              是
            </template>
            <template #unchecked>
              否
            </template>
          </n-switch>
        </n-space>
      </div>
      <div v-for="algo in algoNames" :key="algo" style="margin: 5px 0">
        <n-input-group>
          <n-input-group-label style="flex: 0 0 120px">
            {{ algo }}
          </n-input-group-label>
          <InputCopyable :value="hashText(algo, clearText)" readonly/>
        </n-input-group>
      </div>
    </c-card>
  </div>
</template>
